<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

	Date.prototype.shortFormat = function() {
		var date=(this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
	    return date;
	}
		
	function Blog(body,date,image){   //클래스 정의,생성자 역할을 동시에 함.
		this.body = body;
		this.date = date;
		this.image = image;
	}
		Blog.prototype.signature = "by Puzzler Ruby";
	
		Blog.prototype.containsText = function(param){
			return (this.body.toLowerCase().indexOf(param.toLowerCase())!=-1);
		};
		
		Blog.prototype.toHTML = function(highlight){
			var  blogHtml = "";
			blogHtml += highlight?"<p style='background-color:#eeeeee'>" : "<p>";
			if(this.image){
				 blogHtml += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +
		            this.image + "'/></td><td style='vertical-align:top'>" + this.body + "</td></tr></table><em>" +
		            this.signature + "</em></p>";
			}else{
				blogHtml += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body + "<br /><em>" + this.signature +
	          	"</em></p>";
			}
			//alert(blogHtml);
			return blogHtml;
		};
		
		Blog.prototype.toString = function(){
			return "[" + this.date.shortFormat() + "] " + this.body
		};	
		
		Blog.blogSorter = function(blog1,blog2){  //클래스  메소드
			return blog2.date - blog1.date;
		};
	
	var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
                 new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),
                 new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
                 new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008"),"../images/cube777.png"),
                 new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),
                 new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),
                 new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")),
                 new Blog("Got the new 7x7x7 cube. Could be my last blog post for a while...", new Date("09/05/2008")) ];
	
		
	function showBlog(numEntries){
		/* blog.sort(function(blog1,blog2){
			return blog2.date - blog1.date;
		}); */
		
		blog.sort(Blog.blogSorter);
		
		if(!numEntries){
			numEntries = blog.length;
		}
		var i = 0;
		var blogText = "";
		//Blog.prototype.signature="lee";		
		while (i<blog.length &&  i < numEntries) {
			//blog[i].signature="lee";
			blogText += blog[i].toHTML(i%2==0);
			i++;				
		}
		document.getElementById("blog").innerHTML=blogText;
	}
	
	function getDaysBetween(date1,date2){
		var days = (date2-date1)/(1000*60*60*24);
		return Math.round(days);
	}
	
	/* var days = getDaysBetween(new Date(blog[0].date),new Date(blog[1].date));
	alert(days);	 */
	
	function searchBlog(){
		var txt  = document.getElementById("searchtext").value;
		for(var i = 0;i<blog.length;i++){	
			
			if(blog[i].containsText(txt)){
				 alert(blog[i].toString());
				break;
			}
		}
		if(i==blog.length){
			alert("sorry not found");
		}
	}
	
	function randomView(){
		var i = Math.floor(Math.random()*blog.length);
		alert(blog[i].toString());
	}
	
	window.onload  = function(event){
		showBlog(3);
	};
</script>
</head>
<body >
	<h3>YouCube - The Blog for Cube Puzzlers</h3>
	<img src="../images/cube.png" alt="You Cube"/>
	<input type="button" id="search" value="Search the Blog" onclick="searchBlog();" />
    <input type="text" id="searchtext" name="searchtext" value="" /> 
	<div id="blog"></div>
	<input type="button" id="showall" value="Show all Blog Entries" onclick="showBlog();"/>	<input type="button" id="random"  value="random view" onclick="randomView()"/>
</body>
</html>